<template>
  <div class="center">
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
        <el-button type="primary" @click="addScoreVisible=true">添加</el-button>
      </div>
      <div class="table_button">
        <el-button type="primary"  @click="scoreClose">关闭</el-button>
      </div>
    </div>

    <div class="flex w-full justify-around text-sm mb-2">
      <span>姓名: {{studentInfo.username}}</span>
      <span>账号: {{studentInfo.account}}</span>
      <span>年级: {{studentInfo.gradeName}}</span>
    </div>
    <el-table stripe style="width: 100%" border fit highlight-current-row ref="tableDataRef" :data="tableData" :key="key">
      <el-table-column min-width="50" align="center" prop="id" label="ID" fixed></el-table-column>
      <el-table-column min-width="100" align="center" prop="subjectName" label="学科" fixed></el-table-column>
      <el-table-column min-width="150" align="center" prop="target_score" label="提分目标分数" fixed>
        <template slot-scope="scope">
          <el-tag @click="toEditTarget(scope.row)">{{scope.row.target_score}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="150" align="center" prop="current" label="当前分数">
        <template slot-scope="scope">
          <div v-for="item in scope.row.current" >
            <span style="padding-right: 10px;">{{item.score}}分</span>
            <span>{{item.create_time | numberDays}}录入</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="150" align="center" prop="target_score" label="更新日期" fixed>
        <template slot-scope="scope">
          <span>{{scope.row.update_time | newDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200" align="center">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary" @click="addCurrent(scope.row)">录入分数</el-button>
            <el-button  size="mini" @click="delScore(scope.row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText"/>

    <el-dialog :title="isEdit ? '编辑提分目标' : '添加提分目标'" :visible.sync="addScoreVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="40%" @close="scoreDialogClose">
      <el-form :model="scoreForm" ref="scoreForm" :rules="rules" class="diolog_adapt" style="width: 600px">
        <el-form-item label="学科:" label-width="130px" prop="subject">
          <el-select v-model="scoreForm.subject" placeholder="请选择" :disabled="isEdit">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提分目标分数:" label-width="130px" prop="target_score">
          <el-input-number v-model="scoreForm.target_score" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="当前分数:" label-width="130px" prop="current_score" v-show="!isEdit">
          <el-input-number v-model="scoreForm.current_score" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addScoreVisible = false" size="mini" round>取 消</el-button>
        <el-button type="primary" v-if="isEdit" @click="toEditScore('scoreForm')" size="mini" round>确定
        </el-button>
        <el-button v-else type="primary" @click="toAddScore('scoreForm')" size="mini" round>确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="录入分数"  :visible.sync="currentScoreVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="40%" @close="currentDialogClose">
      <el-form :model="currentForm" class="diolog_adapt" style="width: 600px">
        <el-form-item label="当前分数" label-width="130px">
          <el-input-number v-model="currentForm.score"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="currentScoreVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCurrentScoreControl">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable/index.vue";
import {
  addCurrentScore,
  addStudentScore,
  delStudent,
  delStudentScore,
  editStudentScore,
  queryStudentScore
} from "@/api/teacher";
import deleteDialog from "@/components/deleteDialog/index.vue";

export default {
  name: "score",
  components: {deleteDialog, dynamicTable},
  props: {
    studentInfo: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      tableData: [],
      key: 1,
      addScoreVisible: false,
      scoreForm: {
        subject: '',
        target_score: 0,
        current_score: 0,
      },
      currentForm: {
        score: 0
      },
      rules: {},
      isEdit: false,
      currentScoreVisible: false,
      deleteDialogs: {show: false, deleteText: '', deleteId: 0},
      options:[{value: 1,label: '语文'},{value: 2, label: '数学'},{value:3,label: '英语'},{value: 4,label: '政治'}, {value: 5, label: '历史'},{value:6, label: '地理'},
        {value:7, label: '物理'}, {value: 8, label: '化学'}, {value: 9, label: '生物'}, {value: 10, label: '科学'}]
    }
  },
  created() {
    this.queryScoreControl()
  },
  methods: {
    scoreClose() {
      this.$emit("scoreClose");
    },
    scoreDialogClose() {
      this.addScoreVisible = false
      this.isEdit = false
      this.$nextTick(() => {
        this.scoreForm = this.$options.data().scoreForm
      })
    },
    currentDialogClose() {
      this.currentForm.score = 0
    },
    refresh() {
      this.queryScoreControl()
    },
    toAddScore(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let addForm = JSON.parse(JSON.stringify(this.scoreForm))
          addForm.last_ip = sessionStorage.getItem("Ip")
          addForm.userId = localStorage.getItem("ID")
          addForm.studentId = this.studentInfo.id
          addStudentScore(addForm).then(res => {
            this.$message.success(res.msg)
            this.addScoreVisible = false
            this.queryScoreControl()
          }).catch(err => {
          })
        } else {
          return false;
        }
      });
    },
    toEditScore(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let editForm = JSON.parse(JSON.stringify(this.scoreForm))
          editForm.last_ip = sessionStorage.getItem("Ip")
          editForm.userId = localStorage.getItem("ID")
          editForm.studentId = this.studentInfo.id
          editStudentScore(editForm).then(res => {
            this.$message.success(res.msg)
            this.addScoreVisible = false
            this.queryScoreControl()
          }).catch(err => {
          })
        } else {
          return false;
        }
      });
    },
    queryScoreControl() {
      queryStudentScore({
        studentId: this.studentInfo.id
      }).then(res => {
        this.tableData = res.data
      }).catch(err => {
        this.tableData = []
      })
    },
    addCurrent(row) {
      this.currentScoreVisible=true
      this.currentForm.id = row.id
    },
    addCurrentScoreControl() {
      addCurrentScore({
        id: this.currentForm.id,
        score: this.currentForm.score
      }).then(res => {
        this.$message.success(res.msg)
        this.currentScoreVisible = false
        this.queryScoreControl()
      })
    },
    toEditTarget(row) {
      console.log("这是点击target", row)
      this.isEdit = true
      this.scoreForm.subject = row.subject
      this.scoreForm.target_score = row.target_score
      this.scoreForm.id = row.id
      this.addScoreVisible = true
    },

    delScore(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = {
        userId: localStorage.getItem("ID"),
        last_ip: sessionStorage.getItem("Ip"),
        id: this.deleteDialogs.deleteId,
      }
      delStudentScore(params).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.queryScoreControl()
      }).catch(err => {
        console.log("请求失败", err)
      })
    }

  }
}
</script>

<style scoped>

</style>
